<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>实时聊天</title>
  <!-- 引入Bootstrap CSS -->
  <link href="js/bootstrap.min.css" rel="stylesheet">
  <!-- 引入Font Awesome图标 -->
  <link href="js/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <!-- 引入Bootstrap JS -->
  <script src="js/bootstrap.bundle.min.js"></script>
  <!-- 引入jQuery -->
  <script src="js/jquery.min.js"></script>
  <!-- 引入xterm.js -->
  <link rel="stylesheet" href="js/xterm/xterm.css" />
  <script src="js/xterm/xterm.js"></script>
  <script src="js/xterm/xterm-addon-fit.js"></script>
  <script src="js/xterm/xterm-addon-web-links.js"></script>
  <!-- 引入外部样式 -->
  <link href="js/style.css" rel="stylesheet">
  <style>
    /* SSH连接配置侧边面板（吸附屏幕左侧，可折叠） */
    #ssh-config-panel {
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      width: 320px;
      transform: translateX(-100%);
      transition: transform 0.3s ease;
      z-index: 1050;
      display: flex;
      flex-direction: column;
    }
    #ssh-config-panel.open {
      transform: translateX(0);
    }
    #ssh-config-close {
      border: none;
    }
    @media (max-width: 768px) {
      #ssh-config-panel {
        width: 85vw;
      }
    }
  </style>
</head>
<body class="bg-light min-vh-100">
  <!-- 顶部导航栏 -->
  <nav class="navbar ">
    <div class="container">
      <!-- 选项卡导航 -->
      <div class="tabs mt-2 ">
        <ul class="nav nav-tabs " role="tablist">
          <li class="nav-item" role="presentation">
            <button class="nav-link active " id="chat-tab" data-bs-toggle="tab" data-bs-target="#chat-content" type="button" role="tab" aria-controls="chat-content" aria-selected="true">
              <i class="fa fa-comments-o mr-1"></i>
              Chat
            </button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="admin-tab" data-bs-toggle="tab" data-bs-target="#admin-content" type="button" role="tab" aria-controls="admin-content" aria-selected="false">
              <i class="fa fa-cog mr-1"></i>系统管理
            </button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="sqlite-tab" data-bs-toggle="tab" data-bs-target="#sqlite-content" type="button" role="tab" aria-controls="sqlite-content" aria-selected="false">
              <i class="fa fa-database mr-1"></i>SQLite
            </button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="apitest-tab" data-bs-toggle="tab" data-bs-target="#apitest-content" type="button" role="tab" aria-controls="apitest-content" aria-selected="false">
              <i class="fa fa-flask mr-1"></i>APITEST
            </button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="ssh-tab" data-bs-toggle="tab" data-bs-target="#ssh-content" type="button" role="tab" aria-controls="ssh-content" aria-selected="false">
              <i class="fa fa-terminal mr-1"></i>SSH
            </button>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- 主要内容 -->
  <main class="container">
    <!-- 选项卡内容 -->
    <div class="tab-content">
      <!-- 聊天室选项卡内容 -->
      <div class="tab-pane active" id="chat-content" role="tabpanel" aria-labelledby="chat-tab">
        <rsp:include page="partials/chat_tab" />
      </div>
      <!-- 系统管理选项卡内容 -->
      <div class="tab-pane" id="admin-content" role="tabpanel" aria-labelledby="admin-tab">
        <rsp:include page="partials/admin_tab" />
      </div>
      <!-- SSH选项卡内容 -->
      <div class="tab-pane" id="ssh-content" role="tabpanel" aria-labelledby="ssh-tab">
        <rsp:include page="partials/ssh_tab" />
      </div>
      <!-- SQLite选项卡内容 -->
      <div class="tab-pane" id="sqlite-content" role="tabpanel" aria-labelledby="sqlite-tab">
        <rsp:include page="partials/sqlite_tab" />
      </div>
      <!-- APITEST选项卡内容 -->
      <div class="tab-pane" id="apitest-content" role="tabpanel" aria-labelledby="apitest-tab">
        <rsp:include page="partials/apitest_tab" />
      </div>
    </div>
  </main>

  
  <!-- 用户名输入模态框 -->
  <div class="modal fade" id="usernameModal" tabindex="-1" aria-labelledby="usernameModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header bg-primary text-white">
          <h5 class="modal-title" id="usernameModalLabel">
            <i class="fa fa-user-circle-o mr-2"></i>请输入您的昵称
          </h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="关闭"></button>
        </div>
        <div class="modal-body">
          <form id="usernameForm">
            <div class="mb-3">
              <label for="usernameInput" class="form-label">昵称</label>
              <input type="text" class="form-control" id="usernameInput" placeholder="请输入您的昵称" required>
              <div class="form-text">昵称将显示给其他聊天用户</div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" id="confirmUsername">确认</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 新增SSH服务器模态框（通过partial引入） -->
  <rsp:include page="partials/modals/ssh_add_server_modal" />

  <!-- SFTP 文件管理模态框（通过partial引入） -->
  <rsp:include page="partials/modals/sftp_modal" />

  <!-- 引入外部JavaScript -->
  <script src="js/chat.js"></script>
  <script src="js/sqlite.js"></script>
  <script src="js/ssh.js"></script>
  <script src="js/sftp.js"></script>
  <!-- JSON编辑器（Ace）CDN，加载失败将自动回退到文本域 -->
  <script src="https://cdn.jsdelivr.net/npm/ace-builds@1.23.4/src-min-noconflict/ace.js"></script>
  <script src="js/apitest.js"></script>
  <!-- 图片预览弹窗 -->
  <div class="modal fade image-preview-modal" id="imagePreviewModal" tabindex="-1" aria-labelledby="imagePreviewLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="imagePreviewLabel">图片预览</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
        </div>
        <div class="modal-body">
          <img id="imagePreviewImg" src="" alt="预览图">
        </div>
      </div>
    </div>
  </div>

  <!-- 拍照弹窗（摄像头预览与拍摄） -->
  <div class="modal fade" id="cameraCaptureModal" tabindex="-1" aria-labelledby="cameraCaptureLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="cameraCaptureLabel">拍照</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
        </div>
        <div class="modal-body">
          <div class="d-flex justify-content-center">
            <video id="cameraPreview" autoplay playsinline style="max-width:100%; border-radius:8px; background:#000"></video>
            <canvas id="cameraCanvas" class="d-none"></canvas>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" id="cameraSwitchBtn">切换镜头</button>
          <button type="button" class="btn btn-primary" id="cameraCaptureBtn">拍摄并发送</button>
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">关闭</button>
        </div>
      </div>
    </div>
  </div>
  <script>
    // 选项卡切换事件
    document.querySelectorAll('.nav-tabs button').forEach(button => {
      button.addEventListener('click', () => {
        // 移除所有active类
        document.querySelectorAll('.nav-link').forEach(link => {
          link.classList.remove('active')
          link.classList.add('text-opacity-80')
        })
        document.querySelectorAll('.tab-pane').forEach(pane => {
          pane.classList.remove('active')
        })
        
        // 添加当前active类
        button.classList.add('active')
        button.classList.remove('text-opacity-80')
        const target = button.getAttribute('data-bs-target')
        document.querySelector(target).classList.add('active')
      })
    })

    // 页面加载完成后执行
    window.addEventListener('DOMContentLoaded', () => {
      // 初始化聊天功能
      initChat();
      
      // 初始化SQLite功能
      initSQLite();
      
      // 初始化SSH功能
      initSSH();
      // 初始化APITEST功能
      if (typeof initApiTest === 'function') {
        initApiTest();
      }
      // 初始化SFTP界面工具状态
      if (typeof initSFTP === 'function') {
        initSFTP();
      }
      
      // 添加一些动画效果
      document.querySelectorAll('.card').forEach(card => {
        card.classList.add('animate__animated', 'animate__fadeIn')
      })
    })
  </script>
</body>
</html>